<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :modal="false"
               width="70%"
               class="user-dialog add-or-updata"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-descriptions class="margin-top"
                       title="重要信息"
                       :column="4"
                       border>
        <el-descriptions-item>
          <template slot="label">
            设备ID
          </template>
          {{dataForm.deviceId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            设备名称
          </template>
          {{dataForm.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所属子系统
          </template>
          <span>{{subsystemToString(dataForm.subsystem)}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            设备类型
          </template>
          <span>{{EquTypeListToString(dataForm.deviceType)}}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.status&&false">
          <template slot="label">
            运行状态
          </template>
          {{dataForm.status== 0? '启用' : '禁用'}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.energy">
          <template slot="label">
            是否纳入能耗管理
          </template>
          {{dataForm.energy== 1? '是' : '否'}}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            设备描述
          </template>
          {{dataForm.marks}}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            设备图片
          </template>
          <div>
            <el-image style="width: 150px; height: 150px"
                      v-for="item in dataForm.url"
                      :key="item.index"
                      :src="item"
                      :preview-src-list="srcList">
            </el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.iot === 1">
          <template slot="label">
            对接平台
          </template>
          {{!dataForm.platformName?'无':dataForm.platformName}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.iot === 1&&(dataForm.deviceType === 4||dataForm.deviceType === 5||dataForm.deviceType === 7)">
          <template slot="label">
            支持授权方式
          </template>
          {{authorizationModeToString(dataForm.authorizationMode)}}
        </el-descriptions-item>
        <el-descriptions-item v-if="false"
                              :span="2">
          <template slot="label">
            设备二维码
          </template>
          <QRcode width="150"
                  height="150"
                  :content="JSON.stringify(dataForm)"
                  :load="false"></QRcode>
          <span @click="creatQrCode">下载二维码</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.platform">
          <template slot="label">
            逻辑ID
          </template>
          {{getlogicIdToString(dataForm.logicId)}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.deviceType === 5||dataForm.deviceType === 7">
          <template slot="label">
            是否门禁管理统一授权
          </template>
          {{dataForm.unifiedAuthorization == 1? '是' : '否'}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top"
                       style="margin-top:15px"
                       title="基础信息"
                       :column="4"
                       border>
        <el-descriptions-item>
          <template slot="label">
            产品类型
          </template>
          <span v-if="dataForm.type === 1">网关设备</span>
          <span v-if="dataForm.type === 2">网关子设备</span>
          <span v-if="dataForm.type === 3">直连设备</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            设备型号
          </template>
          {{dataForm.model}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.web">
          <template slot="label">
            联网方式
          </template>
          {{dataForm.web}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.ip">
          <template slot="label">
            IP地址
          </template>
          {{dataForm.ip}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            品牌
          </template>
          {{dataForm.brand}}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            所在位置
          </template>
          {{dataForm.areaName}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.port">
          <template slot="label">
            端口
          </template>
          {{dataForm.port}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.password">
          <template slot="label">
            密码
          </template>
          {{dataForm.password}}
        </el-descriptions-item>
        <el-descriptions-item v-if="dataForm.machineNo">
          <template slot="label">
            机号
          </template>
          {{dataForm.machineNo}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top"
                       style="margin-top:15px"
                       title="供应商信息"
                       :column="3"
                       border>
        <el-descriptions-item>
          <template slot="label">
            供应商名称
          </template>
          {{dataForm.supplier}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            联系人
          </template>
          {{dataForm.linkMan}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            联系电话
          </template>
          {{dataForm.link}}
        </el-descriptions-item>
      </el-descriptions>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="closeDialog()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
// import QRCode from 'qrcodejs2'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '/tb/file/delFileOss',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '/tb/bannerPicture', // 添加或修改接口，API地址
        updateURL: '/tb/bannerPicture', // 添加或修改接口，API地址
        getDataInfoURL: '/tb/device/getDevice?id=', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {
        id: ''
      },
      productTypeList: [{ // 产品类型
        id: 1,
        name: '网关设备'
      }, {
        id: 2,
        name: '网关子设备'
      }, {
        id: 3,
        name: '直连设备'
      }],
      EquTempList: [{ // 设备模板
        id: 1,
        name: '网关设备'
      }, {
        id: 2,
        name: '网关子设备'
      }, {
        id: 3,
        name: '直连设备'
      }],
      onlineList: [{ // 联网方式
        id: 'Wi-Fi',
        name: 'Wi-Fi'
      }, {
        id: '2G/4G/5G',
        name: '2G/4G/5G'
      }, {
        id: '以太网（有线）',
        name: '以太网（有线）'
      }, {
        id: '其他',
        name: '其他'
      }],
      currentAppMenu: [{ id: 4, name: '会务管理系统' },
        { id: 1, name: '宿舍管理系统' },
        { id: 7, name: '访客管理系统' },
        { id: 2, name: '智慧路灯系统' },
        { id: 3, name: '多媒体管理系统' },
        { id: 5, name: '餐饮管理系统' },
        { id: 6, name: '能耗管理系统' },
        { id: 0, name: '集成管理系统' },
        { id: 8, name: '视频监控系统' },
        { id: 9, name: '健身房管理系统' },
        { id: 10, name: '门禁管理系统' }],
      locationList: [], // 所在位置
      authorizationModeList: [{ id: 1, name: '指纹' },
        { id: 2, name: '人脸' },
        { id: 3, name: '密码' },
        { id: 4, name: '门卡' }],
      logicList: [],
      srcList: []
    }
  },
  methods: {
    creatQrCode () {
      const canvas = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
      const alink = document.createElement('a')
      alink.setAttribute('href', canvas) // 如果使用canvas，那么把imgSrc改为canvas
      alink.download = 'qrCode.png'
      alink.click()
    },
    async init (data) {
      this.dataForm.id = data.id
      await this.getDataInfo().then(res => {
        if (res.code !== 0) {
          return
        }
        if (res.data.url) {
          this.srcList = res.data.url
        }
      })
      await this.getlogicList()
      this.visible = true
    },
    async getlogicList () {
      if (!this.dataForm.deviceType || !this.dataForm.platform) {
        return
      }
      await this.$http.get(`tb/device/thirdPlatDevice?deviceType=${this.dataForm.deviceType}&thirdPlatId=${this.dataForm.platform}&cameraName=`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          if (res.data) {
            this.logicList = res.data
          }
        }
      })
    },
    getlogicIdToString (_id) {
      let str = ''
      if (_id) {
        str = _id
        if (typeof _id === 'string') {
          let obj = this.logicList.find(item => item.cameraIndexCode === _id)
          if (obj) {
            str = '(' + obj.cameraName + ')' + _id
          }
        }
      }
      return str
    },
    authorizationModeToString (val) {
      let str = ''
      if (val) {
        const arr = val.split(',')
        const appMenuMap = new Map(this.authorizationModeList.map(item => [item.id, item.name]))
        str = arr.reduce((res, cur) => {
          if (appMenuMap.has(Number(cur))) {
            if (res.length > 0) {
              res += ','
            }
            res += appMenuMap.get(Number(cur))
          }
          return res
        }, '')
      }
      return str
    },
    EquTypeListToString (val) {
      let str = ''
      if (val) {
        let obj = this.$store.state.EquTypeList.find(item => item.id === val)
        str = obj.name
      }
      return str
    },
    subsystemToString (val) {
      let str = ''
      if (val) {
        const arr = val.split(',')
        const appMenuMap = new Map(this.currentAppMenu.map(item => [item.id, item.name]))
        str = arr.reduce((res, cur) => {
          if (appMenuMap.has(Number(cur))) {
            if (res.length > 0) {
              res += ','
            }
            res += appMenuMap.get(Number(cur))
          }
          return res
        }, '')
      }
      return str
    },
    closeDialog () {
      this.$emit('callBack')
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.label-left-form {
  display: flex;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 10px;

  .title {
    min-width: 80px;
    margin: 0 10px;
    vertical-align: -8%;
  }

  .line {
    width: 100%;
    border-top: 1px solid #ccc;
  }
}
</style>
